<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Segment - Toolbar</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Segment - Toolbar</ion-title>
        </ion-toolbar>

        <ion-toolbar>
          <ion-segment value="Top">
            <ion-segment-button value="Paid">
              <ion-label>Paid</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Free">
              <ion-label>Free</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Top">
              <ion-label>Top</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar class="themed">
          <ion-segment value="Top">
            <ion-segment-button value="Paid">
              <ion-label>Paid</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Free">
              <ion-label>Free</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Top">
              <ion-label>Top</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar color="primary">
          <ion-segment value="Free">
            <ion-segment-button value="Paid">
              <ion-label>Paid</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Free">
              <ion-label>Free</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Top">
              <ion-label>Top</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar color="secondary">
          <ion-segment value="Top">
            <ion-segment-button value="Paid">
              <ion-label>Paid</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Free">
              <ion-label>Free</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Top">
              <ion-label>Top</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar color="danger">
          <ion-segment name="dynamicPropDisable" disabled>
            <ion-segment-button value="Bookmarks">
              <ion-label>Bookmarks</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Reading List">
              <ion-label>Reading List</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Shared Links">
              <ion-label>Shared Links</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar color="dark">
          <ion-segment name="dynamicAttrElem" value="active">
            <ion-segment-button value="active">
              <ion-label>Active</ion-label>
            </ion-segment-button>
            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
              <ion-label>Disabled</ion-label>
            </ion-segment-button>
            <ion-segment-button value="inactive" disabled="false">
              <ion-label>Inactive</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar>
          <ion-segment value="rainy">
            <ion-segment-button value="sunny">
              <ion-label>Sunny</ion-label>
            </ion-segment-button>
            <ion-segment-button value="rainy">
              <ion-label>Rainy</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar color="primary">
          <ion-segment color="light" value="rainy">
            <ion-segment-button value="sunny"> Sunny </ion-segment-button>
            <ion-segment-button value="rainy"> Rainy </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <!-- Label only -->
        <ion-toolbar color="warning">
          <ion-segment value="1">
            <ion-segment-button value="1">
              <ion-label>Item One</ion-label>
            </ion-segment-button>
            <ion-segment-button value="2">
              <ion-label>Item Two</ion-label>
            </ion-segment-button>
            <ion-segment-button value="3">
              <ion-label>Item Three</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <!-- Icon only -->
        <ion-toolbar color="secondary">
          <ion-segment value="heart">
            <ion-segment-button value="call">
              <ion-icon name="call"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="heart">
              <ion-icon name="heart"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="pin">
              <ion-icon name="pin"></ion-icon>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <!-- Icon top -->
        <ion-toolbar color="danger">
          <ion-segment value="2">
            <ion-segment-button value="1">
              <ion-label>Item One</ion-label>
              <ion-icon name="call"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="2">
              <ion-label>Item Two</ion-label>
              <ion-icon name="heart"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="3">
              <ion-label>Item Three</ion-label>
              <ion-icon name="pin"></ion-icon>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <!-- Icon bottom -->
        <ion-toolbar color="tertiary">
          <ion-segment value="1">
            <ion-segment-button value="1" layout="icon-bottom">
              <ion-icon name="call"></ion-icon>
              <ion-label>Item One</ion-label>
            </ion-segment-button>
            <ion-segment-button value="2" layout="icon-bottom">
              <ion-icon name="heart"></ion-icon>
              <ion-label>Item Two</ion-label>
            </ion-segment-button>
            <ion-segment-button value="3" layout="icon-bottom">
              <ion-icon name="pin"></ion-icon>
              <ion-label>Item Three</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <!-- Icon start -->
        <ion-toolbar color="dark">
          <ion-segment value="1">
            <ion-segment-button value="1" layout="icon-start">
              <ion-label>Item One</ion-label>
              <ion-icon name="call"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="2" layout="icon-start">
              <ion-label>Item Two</ion-label>
              <ion-icon name="heart"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="3" layout="icon-start">
              <ion-label>Item Three</ion-label>
              <ion-icon name="pin"></ion-icon>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <!-- Icon end -->
        <ion-toolbar color="medium">
          <ion-segment value="1">
            <ion-segment-button value="1" layout="icon-end">
              <ion-icon name="call"></ion-icon>
              <ion-label>Item One</ion-label>
            </ion-segment-button>
            <ion-segment-button value="2" layout="icon-end">
              <ion-icon name="heart"></ion-icon>
              <ion-label>Item Two</ion-label>
            </ion-segment-button>
            <ion-segment-button value="3" layout="icon-end">
              <ion-icon name="pin"></ion-icon>
              <ion-label>Item Three</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <!-- Disabled -->
        <ion-toolbar color="success">
          <ion-segment disabled value="1">
            <ion-segment-button value="1" layout="icon-end">
              <ion-icon name="call"></ion-icon>
              <ion-label>Item One</ion-label>
            </ion-segment-button>
            <ion-segment-button value="2" layout="icon-end">
              <ion-icon name="heart"></ion-icon>
              <ion-label>Item Two</ion-label>
            </ion-segment-button>
            <ion-segment-button value="3" layout="icon-end">
              <ion-icon name="pin"></ion-icon>
              <ion-label>Item Three</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <!-- Color -->
        <ion-toolbar color="light">
          <ion-segment color="secondary" value="1">
            <ion-segment-button value="1" layout="icon-end">
              <ion-icon name="call"></ion-icon>
              <ion-label>Item One</ion-label>
            </ion-segment-button>
            <ion-segment-button value="2" layout="icon-end">
              <ion-icon name="heart"></ion-icon>
              <ion-label>Item Two</ion-label>
            </ion-segment-button>
            <ion-segment-button value="3" layout="icon-end">
              <ion-icon name="pin"></ion-icon>
              <ion-label>Item Three</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding"> Segment in Toolbar </ion-content>

      <style>
        .themed {
          --ion-toolbar-background: #3880ff;
        }

        .ios .themed {
          --ion-toolbar-segment-background: rgba(255, 255, 255, 0.11);
          --ion-toolbar-segment-color: #fff;

          --ion-toolbar-segment-color-checked: #3880ff;
        }

        .md .themed {
          --ion-toolbar-segment-color: rgba(255, 255, 255, 0.6);
          --ion-toolbar-segment-color-checked: #fff;

          --ion-toolbar-segment-indicator-color: #fff;
        }
      </style>
    </ion-app>
  </body>
</html>
